<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html >
<head>
<title>员工轨迹</title>
<style>.backbtn{height: 38px;line-height: 38px;border: 1px solid transparent;padding: 0 18px;background-color: #009688;
    white-space: nowrap;text-align: center;font-size: 14px;border-radius: 2px;cursor: pointer;margin:10px;width: 100px;}}</style>
</head>
<body >
<div>
<a style="color: #fff!important;" href="{{ url('/admin/staff/index') }}">
	<div class="backbtn">
		后退
	</div>
</a>
<fieldset>
<div style="min-height: 700px; width: 100%;" id="map">
</div>
<script type="text/javascript">
var map; //Map实例
//后台传过来
var currentLat = 120.523248;
var currentLon = 36.193825;
var my ={ title: "我的位置"};
var markerArr = [
	
	@foreach($trajectory as $v)
	  { title: "{{$v['id']}}", point: "{{$v['trajectory']}}"},	@endforeach
];

function map_init() {
map = new BMap.Map("map");
//第1步：设置地图中心点，当前城市
var point = new BMap.Point(currentLat,currentLon);
//第2步：初始化地图,设置中心点坐标和地图级别。
map.centerAndZoom(point, 14);
//第3步：启用滚轮放大缩小
map.enableScrollWheelZoom(true);
//第4步：向地图中添加缩放控件
var ctrlNav = new window.BMap.NavigationControl({
anchor: BMAP_ANCHOR_TOP_LEFT,
type: BMAP_NAVIGATION_CONTROL_LARGE
});
map.addControl(ctrlNav);
//第5步：向地图中添加缩略图控件
var ctrlOve = new window.BMap.OverviewMapControl({
anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
isOpen: 1
});
map.addControl(ctrlOve);

//第6步：向地图中添加比例尺控件
var ctrlSca = new window.BMap.ScaleControl({
anchor: BMAP_ANCHOR_BOTTOM_LEFT
});
map.addControl(ctrlSca);


//第7步：绘制点 
for (var i = 0; i < markerArr.length; i++) {
var p0 = markerArr[i].point.split(",")[0];
var p1 = markerArr[i].point.split(",")[1];
var maker = addMarker(new window.BMap.Point(p0, p1), i);
addInfoWindow(maker, markerArr[i]); 
}
//绘制点
var points = new Array();
for (var i = 0; i < markerArr.length; i++) {
var p0 = markerArr[i].point.split(",")[0];
var p1 = markerArr[i].point.split(",")[1];
var thePoint1 = new BMap.Point(p0, p1);
points.push(thePoint1);
}
drawPolyline(map, points);

// 添加信息窗口
function addInfoWindow(marker, poi) {
// marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
var label = new window.BMap.Label(poi.title, { offset: new window.BMap.Size(2, 1) });
marker.setLabel(label);
var clo="";
if("我的位置"==poi.title){
clo="#FF5782";
}else{
clo="#E6FED";
}
label.setStyle({
color: "#fff",
fontSize: "16px",
backgroundColor: "0.05",
border: "0",
fontWeight: "bold"
});
//maps.addOverlay(lab1);

var info = new window.BMap.InfoWindow("<p style=’font-size:12px;lineheight:1.8em;color:"+clo+";’>" +poi.title+ "</p>"); // 创建信息窗口对象
marker.addEventListener("mouseover", openInfoWinFun);
var openInfoWinFun = function () {
this.openInfoWindow(info);
};
}
}

// 添加标注
function addMarker(point, index) {
index=11;
var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png",
new BMap.Size(23, 25), {
offset: new BMap.Size(10, 25),
imageOffset: new BMap.Size(0, 0 - index * 25)

});
var marker = new BMap.Marker(point, { icon: myIcon });
map.addOverlay(marker);
return marker;
}	
//异步调用百度js
function map_load() {
var load = document.createElement("script");
load.src = "http://api.map.baidu.com/api?v=1.4&callback=map_init";
document.body.appendChild(load);
}

/**
* 画线
* @param bMap
* @param points
*/
function drawPolyline(bMap, points) {
if (points==null || points.length<=1) {
return;
}
bMap.addOverlay(new BMap.Polyline(points, {
strokeColor : "blue",
strokeWeight : 3,
strokeOpacity : 0.6
})); // 画线

}

window.onload = map_load;
</script>
</fieldset>
</div>
</body>
</html>